<template>
  <div class="cinema-detail">
    <div class="header">
      <van-nav-bar
        title="影院详情"
        left-arrow
        @click-left="back"
        @click-right="showShare = true"
      >
        <template #right>
          <van-icon name="star" color="#fff" size="19" />
          <van-icon name="share" color="#fff" size="20" />
        </template>
      </van-nav-bar>
    </div>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />

    <div class="container">
      <div class="top">
        <div class="top-left fl" @click="toMoreDetail(cinemaId)">
          <div>
            <div class="cinema-name">{{ title }}</div>
            <!-- <div class="position one-text">从化区服从路2号新光百德广场3楼</div> -->
          </div>
          <div class="icon">
            <van-icon name="arrow" size="15" />
          </div>
        </div>
        <div class="top-right fr">
          <van-icon name="location-o" color="blue" size="22" />
        </div>
      </div>
      <div class="discount-box">
        <div class="discount">
          <div class="discount-left">
            <div>
              <div class="name">折扣卡</div>
              <div class="desc">10.9元起开卡</div>
            </div>
            <van-badge content="促">
              <!-- <div class="child" /> -->
            </van-badge>
          </div>
          <div class="discount-rigth"></div>
        </div>
        <div class="quan">
          <div class="discount-left">
            <div class="name">领券</div>
            <div class="desc">手快有，手慢无</div>
          </div>
          <div class="discount-rigth"></div>
        </div>
      </div>
      <div class="films-block">
        <van-swipe :loop="false" :width="85" :show-indicators="false">
          <!-- <div class="cover"> -->
          <van-swipe-item v-for="(item,index) in films" :key="index">
            <img
              class="auto-img"
              :src="item.img"
              alt=""
              @click="changeFilm(item)"
            />
          </van-swipe-item>
          <!-- </div> -->
        </van-swipe>
      </div>

      <div class="introducr-box">
        <div class="intro-top">
          <span class="title">{{fimlName}}</span>
          <span class="score-num">{{score}}</span>
          <span class="score">分</span>
        </div>
        <div class="intro-bottom">
          {{introduce}}
          <!-- <span class="dur">130分钟 | </span>
          <span class="type">灾难 | </span>
          <span class="actor">哈利·贝瑞</span> -->
        </div>

        <!-- <div class="time">
          <span>2022-04-05</span>
          <span>2022-04-06</span>
          <span>2022-04-07</span>
        </div> -->
      </div>
    </div>

    <CinemaFilmList :list="showTime" />
  </div>
</template>

<script>
import CinemaFilmList from "../components/CinemaFilmList.vue";
export default {
  name: "CinemaDetail",
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      active: 1,

      title: null,
      films:null,
      fimlName:null,
      introduce: null,
      score: null,

      showTime: null,
      cinemaId:null
    };
  },
  components: {
    CinemaFilmList,
  },
  created() {
    this.getCinemaData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    // 点击分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

    // 获取影院详情数据
    getCinemaData() {
      

      this.axios({
        method: "get",
        url: `/cinema/shows?cinemaId=${16832}&ci=${
          this.$store.state.cityId
        }&channelId=4`,
        // params: {
        //   // cinemaId: this.$store.state.cinemaId,
        //   cinemaId: 16832,
        //   ci: this.$store.state.cityId,
        //   channelId: 4,
        // },
      })
        .then((result) => {
          

          let cinemaData = result.data.data;
          // 

          this.title = cinemaData.cinemaName;
          // 

          this.films = cinemaData.movies;
          

          this.fimlName = cinemaData.movies[0].nm;
          this.score = cinemaData.movies[0].sc;
          this.introduce = cinemaData.movies[0].desc;

          this.showTime = cinemaData.movies[0];
          // 

          this.cinemaId = cinemaData.cinemaId;
        })
        .catch((err) => {
          
        });
    },

    // 
    changeFilm(data){
      
      this.fimlName = data.nm;
      this.score = data.sc;
      this.introduce = data.desc;

      this.showTime = data;
    },

    toMoreDetail(cinemaId){
      
      this.$router.push({name:'MoreCinemaDetail',params:{cinemaId}})
    }
  },
};
</script>

<style lang="less" scoped>
.cinema-detail {
  margin-top: 46px;
}
.header {
  width: 100%;
  height: 46px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #dd403b;
  /deep/ .van-nav-bar {
    background-color: #dd403b;
  }
  /deep/ .van-hairline--bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: none;
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 19px;
  }
  /deep/ .van-icon-star {
    margin-right: 10px;
  }
}
/deep/ .van-share-sheet__options {
  // border: 1px solid #000;
  justify-content: space-around;
}
.top {
  // border: 1px solid #000;
  height: 45px;
  // border: 1px solid #000;
  padding: 5px 12px;
  .top-left {
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .cinema-name {
      font-size: 17px;
      color: #333;
      font-weight: bold;
    }
    .position {
      // border: 1px solid #000;
      width: 220px;
      font-size: 13px;
      color: #666;
      margin-top: 2px;
    }
    .icon {
      line-height: 45px;
      margin-left: 76px;
    }
  }
  .top-right {
    line-height: 45px;
    margin-top: 2px;
  }
}
.discount-box {
  // border: 1px solid #000;
  padding: 0 14px;
  display: flex;
  margin-top: 4px;

  .discount,
  .quan {
    width: calc(50% - 14px);
    height: 26px;
    background-color: rgb(255, 249, 240);
    margin-right: 20px;
    border-radius: 8px;
    padding: 14px;
    color: rgb(243, 183, 79);
    position: relative;
    .name {
      font-size: 15px;
      font-weight: bold;
      margin-top: -4px;
    }
  }
  .quan {
    background-color: rgb(238, 253, 242);
    margin-right: 0;
    color: rgb(80, 233, 126);
  }
  .van-badge {
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 5px;
  }
}
.films-block {
  // border: 1px solid #000;
  background-color: rgba(0, 0, 0, 0.75);
  margin-top: 12px;
  height: 135px;
  padding: 12px;
  position: relative;
}

/deep/ .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 130px;
  text-align: center;
  background-color: #39a9ed;
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
  img {
    border: 2px solid #fff;
    height: 130px;
  }
  // .cover {
  //   border: 4px solid #0f0;
  //   &::after {
  //     content: "";
  //     border-top: 10px solid red;
  //     border-right: 10px solid transparent;
  //     border-bottom: 10px solid transparent;
  //     border-left: 10px solid transparent;
  //     position: absolute;
  //     left: 50%;
  //     margin-left: -10px;
  //     bottom: -18px;
  //   }
  // }
}

.introducr-box {
  // border: 1px solid #000;
  text-align: center;
  .intro-top {
    padding-top: 12px;
    padding-bottom: 6px;
    .title {
      font-size: 17px;
      color: #333;
      font-weight: bold;
      margin-right: 8px;
    }
    .score-num {
      color: #ffb400;
      font-size: 16px;
      font-weight: bold;
    }
    .score {
      color: #ffb400;
      font-weight: bold;
    }
  }
  .intro-bottom {
    color: #999;
    font-size: 13px;
  }
}
.time {
  font-size: 15px;
  text-align: center;
  margin-top: 10px;
  span {
    padding: 0 10px;
  }
}

</style>